<template>
	<scroll-view class="recommend_view" scroll-y @scrolltolower="handleToLower" v-if="recommendList.length>0">
		<!-- 推荐开始 -->
		<view class="recommend_wrap">
			<navigator class="recommend_item" 
			v-for="item in recommendList" 
			:key="item.id"
			:url="`/pages/album/index?id=${item.target}`"
			>
				<image :src="item.thumb" mode="widthFix"></image>
			</navigator>
		</view>
		<!-- 推荐结束 -->
		
		<!-- 月份开始 -->
		<view class="month_wrap">
			<view class="month_title">
				<view class="month_title_info">
					<view class="month_info">
						<text>{{monthes.DD}} /</text>
						{{monthes.MM}} 月
					</view>
					<view class="month_text">{{monthes.title}}</view>
				</view>
				<view class="month_title_more">更多 > </view>
			</view>
			<view class="month_content">
				<view class="month_item" v-for="(item,index) in monthes.items" :key="item.id">
					<go-detail :list="monthes.items" :index="index">
						<image
						mode="aspectFill"
						:src="item.thumb + item.rule.replace('$<Height>', 360)">
						</image>
					</go-detail>
				</view>
			</view>
		</view>
		<!-- 月份结束 -->
		<!-- 热门开始 -->
		<view class="hot_wrap">
			<view class="hot_title">
				<text>热门</text>
			</view>
			<view class="hot_content">
				<view class="hot_content_item" v-for="(item,index) of hotList" :key="item.id">
					<go-detail :list="hotList" :index="index">
						<image :src="item.thumb" mode="widthFix"></image>
					</go-detail>
				</view>
			</view>
		</view>
		<!-- 热门结束 -->
	</scroll-view>
</template>

<script>
	import moment from "moment"
	import goDetail from "@/components/goDetail.vue"
	export default{
		
		data(){
			return{
				recommendList:[],
				monthes:{},
				hotList:[],
				// 请求的参数放到全局
				params:{
						// 获取多少条数据
						limit:30,
						// 关键字
						order:'hot',
						// 要跳过几条
						skip:0
					},
				// 是否还有下一页
				hasMore:true
				
			}
		},
		components:{
			goDetail
		},
		mounted(){
			this.getList()
		},
		methods:{
			handleToLower(){
				/* 
					1.修改参数skip+=limit
					2.重新发送请求
					3.请求成功返回hotList的叠加
				 */
				if(this.hasMore){
					this.params.skip+=this.params.limit
					this.getList()
				}else{
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
				}
				
				
				
			},
			// 发送请求列表
			getList(){
				this.request({
					url:'http://157.122.54.189:9088/image/v3/homepage/vertical',
					data:this.params
				}).then(result=>{
					// 判断是否有下一页数据
					if(result.res.vertical.length === 0){
						this.hasMore = false
						uni.showToast({
							title:'没有更多数据了',
							icon:'none'
						})
						return
					}
					// 判断是否第一次发送请求
					if(this.recommendList.length===0){
						// 第一次发送的请求
						// 推荐模块
						this.recommendList = result.res.homepage[1].items
						// 月份模块
						this.monthes = result.res.homepage[2]
						this.monthes.MM = moment(this.monthes.stime).format("MM")
						this.monthes.DD = moment(this.monthes.stime).format("DD")
					}
					// 热门模块,hotList的es6数组的拼接
					this.hotList = [...this.hotList,...result.res.vertical]
					
					// console.log(this.hotList);
					console.log('list',this.recommendList)
					
					
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend_view{
		// height:屏幕的高度-头部标题的高度
		height: calc(100vh - 36px);
	}
	.recommend_wrap{
		display: flex;
		flex-wrap: wrap;
		
		.recommend_item{
			width: 50%;
			border: 3rpx solid #FFFFFF; 
		}
	}
	
	.month_wrap{
		.month_title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			.month_title_info{
				color: $color;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				.month_info{
					text{
						font-size: 36rpx;
						font-weight: 600;
					}
				}
				.month_text{
					font-size: 34rpx;
					color: #666;
					margin-left: 30rpx;
				}
				
			}
			.month_title_more{
				font-size: 24rpx;
				color: $color;
			}
		}
		.month_content{
			display: flex;
			flex-wrap: wrap;
			.month_item{
				width: 33.33%;
				border: 5rpx solid #FFFFFF;
			}
		}
	}
	.hot_wrap{
		.hot_title{
			padding: 20rpx;
			text{
				border-left: 10rpx solid $color;
				font-size: 30rpx;
				font-weight: 600;
				padding-left: 10rpx;
			}
			
		}
		.hot_content{
			display: flex;
			flex-wrap: wrap;
			.hot_content_item{
				width: 33.33%;
				border: 5rpx solid #FFFFFF;
			}
		}
	}
</style>
